<template>
  <div class="data-container">
    <!-- <div class="data-title" style="margin-bottom: 15px">知识情报概览</div> -->
    <!-- 时间tab栏切换 -->
     <!-- @selectTablist="handleCheckWork" -->
    <data-title text="" class="data-title"  />
    <!-- 接入情况 -->
    <div>
      <div style="font-size: 20px; font-weight: 500; margin: 20px 0">
        接入情况
      </div>
      <div class="data-item">
        <div class="data-item-left">
          <div class="data-item-title">接入概览</div>
          <div style="display: flex">
            <div class="data-left-one">
              <div>
                <img src="@/assets/images/xzjg-icon9@2x.png" alt="" />
              </div>
              <div
                style="
                  font-size: 40px;
                  color: #4b6eef;
                  font-weight: 500;
                  margin-left: 88px;
                "
              >
                160
              </div>
              <div
                style="
                  font-size: 16px;
                  width: 136px;
                  height: 44px;
                  margin-left: 52px;
                  margin-top: 23px;
                  text-align: center;
                "
              >
                知识情报总数量（个）
              </div>
            </div>
            <div class="data-left-two">
              <!-- box1 -->
              <!-- 循环data-big-box -->
              <div class="data-big-box" style="margin-bottom: 20px">
                <!-- 小盒子 -->
                <div style="width: 50%">
                  <div style="margin-bottom: 20px; font-size: 16px">
                    监管业务知识数量
                  </div>
                  <div style="display: flex">
                    <img
                      style="width: 50px; height: 50px"
                      src="@/assets/images/xzjg-icon10@2x.png"
                      alt=""
                    />
                    <span
                      style="
                        font-size: 30px;
                        color: #4b6eef;
                        font-weight: 500;
                        margin-left: 90px;
                        margin-top: 15px;
                      "
                      >55</span
                    >
                  </div>
                </div>
                <div style="width: 50%; padding-left: 24px">
                  <div style="margin-bottom: 20px; font-size: 16px">
                    审批状态情况
                  </div>
                  <div style="display: flex">
                    <img
                      style="width: 50px; height: 50px"
                      src="@/assets/images/xzjg-icon11@2x.png"
                      alt=""
                    />
                    <span
                      style="
                        font-size: 30px;
                        color: #4b6eef;
                        font-weight: 500;
                        margin-left: 60px;
                        margin-top: 15px;
                      "
                      >55/55</span
                    >
                  </div>
                </div>
              </div>
              <!-- box2 -->
              <div class="data-big-box">
                <!-- 小盒子 -->
                <div style="width: 50%">
                  <div style="margin-bottom: 20px; font-size: 16px">
                    网络威胁情报数量
                  </div>
                  <div style="display: flex">
                    <img
                      style="width: 50px; height: 50px"
                      src="@/assets/images/xzjg-icon12@2x.png"
                      alt=""
                    />
                    <span
                      style="
                        font-size: 30px;
                        color: #4b6eef;
                        font-weight: 500;
                        margin-left: 90px;
                        margin-top: 15px;
                      "
                      >55</span
                    >
                  </div>
                </div>
                <div style="width: 50%; padding-left: 24px">
                  <div style="margin-bottom: 20px; font-size: 16px">
                    审批状态情况
                  </div>
                  <div style="display: flex">
                    <img
                      style="width: 50px; height: 50px"
                      src="@/assets/images/xzjg-icon13@2x.png"
                      alt=""
                    />
                    <span
                      style="
                        font-size: 30px;
                        color: #4b6eef;
                        font-weight: 500;
                        margin-left: 60px;
                        margin-top: 15px;
                      "
                      >55/55</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="data-item-right">
          <div class="data-item-title">情报来源统计</div>
          <div>
            <report-pie></report-pie>
          </div>
        </div>
      </div>
    </div>
    <!-- 接入趋势 -->
    <div>
      <div style="font-size: 20px; font-weight: 500; margin: 15px 0px 20px 0">
        接入趋势
      </div>
      <div class="data-item">
        <div class="data-item-left">
          <div class="data-item-title">监管业务接入趋势</div>
          <div>
            <ColleftBar></ColleftBar>
          </div>
        </div>
        <div class="data-item-right">
          <div class="data-item-title">网络威胁情报接入趋势</div>
          <div>
            <colright-bar></colright-bar>
          </div>
        </div>
      </div>
    </div>
    <!-- 订阅趋势 -->
    <div class="read-item">
      <div
        style="
          height: 60px;
          margin-left: 20px;
          line-height: 60px;
          margin-bottom: 16px;
          font-size: 16px;
          font-weight: 600;
        "
      >
        订阅趋势
      </div>
      <!-- 折线图 -->
      <div>
        <!-- <insert-line></insert-line> -->
        <dev-line></dev-line>
      </div>
    </div>
    <!-- 知识情报引用排名 -->
    <div>
      <div style="font-size: 20px; font-weight: 500; margin: 15px 0px 20px 0">
        知识情报引用排名
      </div>
      <div class="data-item">
        <div class="data-item-left">
          <div style="display: flex; justify-content: space-between">
            <div class="data-item-title">监管业务引用次数TOP5</div>
            <div style="margin-top: 12px">
              <el-select v-model="value" placeholder="全部" size="small">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <!-- 横向柱状图左 -->
          <div>
            <rowleft-bar></rowleft-bar>
          </div>
        </div>
        <div class="data-item-right">
          <div style="display: flex; justify-content: space-between">
            <div class="data-item-title">网络威胁情报引用TOP5</div>
            <div style="margin-top: 12px">
              <el-select v-model="value" placeholder="全部" size="small">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <!-- 横向柱状图右 -->
          <div>
            <rowright-bar></rowright-bar>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DataTitle from "./component/DataTitle.vue";
import ReportPie from "./component/ReportPie.vue";
import ColleftBar from "./component/ColleftBar.vue";
import ColrightBar from "./component/ColrightBar.vue";
import RowleftBar from "./component/RowleftBar.vue";
import RowrightBar from "./component/RowrightBar.vue";
import InsertLine from "./component/InsertLine.vue";
import DevLine from "./component/DevLine.vue";


export default {
  name: "KnowOverview",
  components: {
    DataTitle,
    ReportPie,
    ColleftBar,
    ColrightBar,
    RowleftBar,
    RowrightBar,
    InsertLine,
    DevLine
  },
  data() {
    return {
      options: [],
      value: "",
      // 任务执行情况
      details: [
        {
          title: "监管业务知识数量",
          title1: "审批状态情况",
          value: 55,
          value1: 55 / 55,
          img: "sjjr_01.png",
        },
        {
          title: "网络威胁情报数量",
          title1: "审批状态情况",
          value: 12,
          img: "sjjr_01.png",
        },
      ],
      // --------------------------
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.data-container {
  overflow: auto;
  // padding-right: 15px;
  background-color: rgb(238, 240, 245) !important;
  .data-title {
    font-size: 20px;
    color: #2f343e;
    text-align: left;
    font-weight: 500;
  }
  .data-item {
    display: flex;
    justify-content: space-between;
    padding-right: 10px;


    .data-item-left {
      width: 48%;
      // height: 410px;
      margin-right: 20px;
      background: #ffffff;
      border-radius: 4px;
      padding-right: 20px !important;
      .data-left-one {
        // width: 30%;
        img {
          width: 104px;
          height: 104px;
          margin: 25px 60px 45px 68px;
        }
      }
      .data-left-two {
        // overflow: hidden;
        // padding-right: -20px;
        .data-big-box {
          display: flex;
          width: 100%;
          height: 144px;
          background: #f3f5fb;
          border-radius: 4px;
          padding: 24px 35px 28px 24px;
        }
      }
    }
    .data-item-right {
      width: 50%;
      background: #ffffff;
      border-radius: 4px;
      padding-right: 10px !important;
    }
    .data-item-title {
      height: 60px;
      margin-left: 20px;
      line-height: 60px;
      margin-bottom: 28px;
      font-size: 16px;
      font-weight: 600;
    }
    .read-item {
      height: 400px;
      background: #ffffff;
      border-radius: 4px;
    }
  }
  .read-item {
    // height: 400px;
    background: #ffffff;
    border-radius: 4px;
    margin-top: 20px;
    padding-bottom: 32px;
    margin-right:10px;
  }
}
</style>
